<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" size="mini">
      <el-row :gutter="24">
        <el-col :span="21">
          <el-form-item label prop="quoteNo">
            <el-input
              v-model="queryParams.quoteNo"
              placeholder="请输入客户需求编号"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <!-- <el-button type="primary" @click="lookQuoteProject({id: 999})">工程报价</el-button> -->
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="roleList" style="width:98%;margin:10px 1% 0 0" border>
      <el-table-column label="序号" width="120" type="index" />
      <el-table-column label="客户需求编号" prop="quoteNo" :show-overflow-tooltip="true" />
      <el-table-column label="客户名称" prop="customerName" :show-overflow-tooltip="true" />
      <el-table-column label="合作模式" prop="coopMode" align="center" />
      <el-table-column label="业务员" prop="creator.name" align="center" />
      <el-table-column label="创建时间" prop="created" align="center" />
      <el-table-column label="操作" width="310" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 2" class="jstarfont finger color-blue" @click="lookQuote(scope.row)">查看报价单</span>
          <span v-else class="color-gray">未完成报价</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pn"
      :limit.sync="queryParams.ps"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
  name: 'Role',

  data() {
    return {
      roleList: [],
      total: 0,
      loading: false,
      // 日期范围
      dateRange: [],
      queryParams: {
        pn: 1,
        ps: 10,
        quoteNo: '',
      },
      tableData: [
        {
          metarieName: '第三方',
          metarieCode: '1055004425',
        },
        {
          metarieName: '第三方',
          metarieCode: '1055004425',
        },
        {
          metarieName: '第三方',
          metarieCode: '1055004425',
        },
        {
          metarieName: '第三方',
          metarieCode: '1055004425',
        },
        {
          metarieName: '第三方',
          metarieCode: '1055004425',
        },
        {
          metarieName: '第三方',
          metarieCode: '1055004425',
        },
        {
          metarieName: '第三方',
          metarieCode: '1055004425',
        },
      ],
      multipleSelection: [],
    }
  },
  created() {
    this.getList()
  },

  methods: {
    /** 查询角色列表 */
    getList() {
      let param = {
        quoteNo: this.queryParams.quoteNo,
        ps: this.queryParams.ps,
        pn: this.queryParams.pn,
      }
      this.loading = true
      return new Promise((resolve) => {
        this.$params
          .gCostQuote(param)
          .then((res) => {
            console.log(res)
            if (res.code == 200) {
              this.roleList = res.data.rows
              this.total = res.data.total * 1
              this.loading = false
              resolve()
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
    lookQuote(item) {
      if (item.status == 2) {
        this.$router.push({ path: '/business/quote/input', query: { id: item.id } })
      } else {
        this.$message.info('请先完成当前报价单')
      }
      console.log(item.status)
    },
    lookCustomer(item) {
      this.$router.push({ path: '/business/quote/customer', query: { id: item.id } })
    },
    lookQuoteProject(item) {
      this.$router.push({ path: '/business/quote/quoteProject', query: { id: item.id } })
    },

    handleQuery() {
      this.getList()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
  },
}
</script>
<style scoped lang="less">
.jstarfont {
  margin: 0 5px;
  font-size: 14px;
  em {
    color: #0000ff;
  }
}
.unselect {
  user-select: none;
}
</style>